<template>
  <div class="hall-analysis-container" style="height: 300px; width: 500px; overflow: hidden;">
    <!-- 标题栏 -->
    <div class="title-bar">
      <div class="icon"></div>
      <h2>大厅取号情况分析</h2>
    </div>

    
    

    <!-- 取号总览和TOP5部门 -->
    <div class="content-wrapper">
      <!-- 取号总览 -->
      <div class="overview-section">
        <h3>办事总览</h3>
        <div class="overview-cards">
          <div class="overview-card">
            <div class="card-number">99</div>
            <div class="card-label">今日取号量</div>
          </div>
          <div class="overview-card">
            <div class="card-number">100</div>
            <div class="card-label">昨日取号量</div>
          </div>
          <div class="overview-card">
            <div class="card-number">199</div>
            <div class="card-label">本月取号量</div>
          </div>
          <div class="overview-card">
            <div class="card-number">199</div>
            <div class="card-label">年度总取号量</div>
          </div>
          <div class="overview-card">
            <div class="card-number">99</div>
            <div class="card-label">今日取号量</div>
          </div>
          <div class="overview-card">
            <div class="card-number">100</div>
            <div class="card-label">昨日取号量</div>
          </div>
        </div>
      </div>

      <!-- 今日取号量最多部门TOP5 -->
      <div class="top5-section">
        <h3>今日取号量最多部门TOP5</h3>
        <div class="top5-list">
          <div class="top5-item">
            <div class="item-icon star"></div>
            <div class="item-name">部门名称A</div>
            <div class="item-bar">
              <div class="bar-fill orange" style="width: 100%"></div>
            </div>
            <div class="item-value">200 件</div>
          </div>
          <div class="top5-item">
            <div class="item-icon medal"></div>
            <div class="item-name">部门名称B</div>
            <div class="item-bar">
              <div class="bar-fill blue" style="width: 85%"></div>
            </div>
            <div class="item-value">170 件</div>
          </div>
          <div class="top5-item">
            <div class="item-icon award"></div>
            <div class="item-name">部门名称C</div>
            <div class="item-bar">
              <div class="bar-fill blue" style="width: 82%"></div>
            </div>
            <div class="item-value">164 件</div>
          </div>
          <div class="top5-item">
            <div class="item-icon medal"></div>
            <div class="item-name">部门名称D</div>
            <div class="item-bar">
              <div class="bar-fill blue" style="width: 77%"></div>
            </div>
            <div class="item-value">154 件</div>
          </div>
          <div class="top5-item">
            <div class="item-icon medal"></div>
            <div class="item-name">部门名称E</div>
            <div class="item-bar">
              <div class="bar-fill blue" style="width: 71.5%"></div>
            </div>
            <div class="item-value">143 件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HallAnalysisPage'
}
</script>

<style scoped>
.hall-analysis-container {
  background-color: #0f2035;
  color: #fff;
  padding: 10px;
  font-family: 'Microsoft YaHei', sans-serif;
  box-sizing: border-box;
}

.title-bar {
  display: flex;
  align-items: center;
  background-color: #2c5aa0;
  padding: 8px 15px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.icon {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zm0 18.55l-10-5v-2.91l10 5 10-5v2.91l-10 5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 16px;
  margin-right: 8px;
}

.title-bar h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}

.total-number-section {
  margin-bottom: 10px;
}

.total-number-section p {
  font-size: 12px;
  margin-bottom: 8px;
  color: #ccc;
}

.number-boxes {
  display: flex;
  gap: 6px;
}

.number-box {
  width: 38px;
  height: 50px;
  background-color: #2c5aa0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border-radius: 3px;
}

.content-wrapper {
  display: flex;
  gap: 15px;
}

.overview-section, .top5-section {
  flex: 1;
}

.overview-section h3, .top5-section h3 {
  font-size: 13px;
  margin-top: 0;
  margin-bottom: 8px;
  color: #ccc;
  border-left: 2px solid #2c5aa0;
  padding-left: 6px;
}

.overview-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.overview-card {
  width: calc(50% - 5px);
  background-color: #07091a;
  border-radius: 3px;
  padding: 8px;
  text-align: center;
}

.card-number {
  font-size: 18px;
  font-weight: bold;
  color: #ecac39;
  margin-bottom: 3px;
}

.card-label {
  font-size: 11px;
  color: #ccc;
}

.top5-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.top5-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.item-icon {
  width: 14px;
  height: 14px;
}

.star {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffcc00'%3E%3Cpath d='M12 0L14.12 5.46L20 6.19L16.26 10.96L17.09 16.83L12 14.59L6.91 16.83L7.74 10.96L4 6.19L9.88 5.46L12 0Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 12px;
}

.medal {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cccccc'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L9 8.26L12 2Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 12px;
}

.award {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L9 8.26L12 2Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 12px;
}

.item-name {
  flex: 1;
  font-size: 12px;
}

.item-bar {
  flex: 2;
  height: 6px;
  background-color: #444;
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
}

.orange {
  background-color: #ffcc00;
}

.blue {
  background-color: #0099cc;
}

.item-value {
  width: 60px;
  font-size: 12px;
  color: #ccc;
  text-align: right;
}
</style>